<template>
  <view class="wrap">
    <view class="table-title table-item">
      <view class="index">{{$t('序号')}}</view>
      <view class="price"> {{$t('买入费用')}} </view>
      <view class="jg"> {{$t('间隔比例')}}(%) </view>
      <view class="wg"> {{$t('网格止盈')}}(%) </view>
      <view class="jc"> {{$t('预计建仓价')}} </view>
      <view class="cz"> {{$t('操作')}} </view>
    </view>
    <view class="list">
      <view v-for="(item, index) in indexList" :key="index" class="table-item">
        <view class="index">{{$t('第')}}{{ index + 1 }}{{$t('单')}}</view>
        <view class="price">
          <u--input :placeholder="$t('请输入内容')" border="none" v-model="item.amount"></u--input>
        </view>
        <view class="jg">
          <u--input :placeholder="$t('请输入内容')" border="none" v-model="item.interval"></u--input>
        </view>
        <view class="wg">
          <u--input :placeholder="$t('请输入内容')" border="none" v-model="item.gridWinRate"></u--input>
        </view>
        <view class="jc">
          {{ item.jc || 0 }}
        </view>
        <view class="cz">
          <u-button type="error" :text="$t('删除')" @click="deleteinfo(item, index)"></u-button>
        </view>
      </view>
    </view>
    <view class="btn-wrap">
      <u-button type="warning" :plain="true" :text="$t('添加单量')" @click="showAddModal()"></u-button>
      <u-button type="warning" :text="$t('保存并启动')" @click="saveInfo()"></u-button>
    </view>
    <u-modal :show="isShow" :title="title" @cancel="cancelAdd()" @confirm="confirmAdd()" showCancelButton
      :closeOnClickOverlay="true">
      <view class="slot-content">
        <view class="zy">
          ({{$t('注')}}：{{$t('现有')}}{{ indexList.length }}){{$t('单')}}，{{$t('您可继续添加')}}
        </view>
        <view class="num-wrap">
          <view class="label"> {{$t('数量')}} </view>
          <u--input :placeholder="$t('添加单数')" border="none" v-model="value" type="number"></u--input>
        </view>
      </view>
    </u-modal>
    <u-modal :show="isSaveShow" :title="savetitle" @cancel="cancelSave()" @confirm="confirmSave()" showCancelButton
      :closeOnClickOverlay="true">
      <view class="slot-content">
        <view> {{$t('确认提交并保存吗')}} </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShow: false,
        // title: this.$t("请输入需添加的单数"),
        // savetitle: this.$t("提示"),
        value: null,
        isSaveShow: false,
        initParams: null,
        indexList: [],
      };
    },
    computed: {
      title() {
        return this.$t("请输入需添加的单数")
      },
      savetitle() {
        return this.$t("提示")
      }
    },
    methods: {
      showAddModal() {
        this.isShow = true;
      },
      scrolltolower() {
        this.loadmore();
      },
      loadmore() {},

      deleteinfo(item, index) {
        this.indexList.splice(index, 1);
      },
      confirmAdd() {
        let obj = {
          amount: 200,
          gridLossRate: this.initParams.gridLossRate,
          gridWinRate: this.initParams.gridWinRate,
          interval: this.initParams.interval,
          overLossRate: this.initParams.overLossRate,
          overWinRate: this.initParams.overWinRate,
          traceRate: this.initParams.traceRate,
        };
        new Array(this.value).forEach((item, index) => {
          this.indexList.push(obj);
        });
        this.isShow = false;
      },
      cancelAdd() {
        this.isShow = false;
      },
      saveInfo() {
        this.isSaveShow = true;
      },
      confirmSave() {
        let params = {
          id: this.initParams.id,
          amount: "",
          interval: "",
          overWinRate: "",
          overLossRate: "",
          gridWinRate: "",
          gridLossRate: "",
          traceRate: "",
        };

        this.indexList.forEach((item, index) => {
          params.amount += item.amount + "-";
          params.interval += item.interval + "-";
          params.gridWinRate += item.gridWinRate + "-";
          params.overWinRate += this.initParams.overWinRate + "-";
          params.overLossRate += this.initParams.overLossRate + "-";
          params.gridLossRate += this.initParams.gridLossRate + "-";
          params.traceRate += this.initParams.traceRate + "-";
        });
        params.amount = params.amount.slice(0, -1);
        params.interval = params.interval.slice(0, -1);
        params.gridWinRate = params.gridWinRate.slice(0, -1);
        params.overWinRate = params.overWinRate.slice(0, -1);
        params.overLossRate = params.overLossRate.slice(0, -1);
        params.gridLossRate = params.gridLossRate.slice(0, -1);
        params.traceRate = params.traceRate.slice(0, -1);

        this.$http
          .post(
            `/front/trade/setStrategyZY?id=${params.id}&amount=${params.amount}&interval=${params.interval}&gridWinRate=${params.gridWinRate}&overWinRate=${params.overWinRate}&overLossRate=${params.overLossRate}&gridLossRate=${params.gridLossRate}&traceRate=${params.traceRate} `
          )
          .then((res) => {
            if (res.code === 0) {
              uni.$u.toast(this.$t("保存成功"));
            } else {
              uni.$u.toast(this.$t("保存失败"));
            }
          })
          .catch((err) => {
            uni.$u.toast(this.$t("保存失败"));
          });
        this.isSaveShow = false;
      },
      cancelSave() {
        this.isSaveShow = false;
      },
    },
    onLoad: function(options) {
      if (options.form) {
        const data = JSON.parse(decodeURIComponent(options.form));

        this.initParams = data;
        let obj = {
          id: data.id,
          amount: 200,
          gridLossRate: data.gridLossRate,
          gridWinRate: data.gridWinRate,
          interval: data.interval,
          overLossRate: data.overLossRate,
          overWinRate: data.overWinRate,
          traceRate: data.traceRate,
          jc: 0,
        };
        let arr = new Array(6).fill(obj);

        this.indexList = arr;
      }

      if (options.list) {
        const data = JSON.parse(decodeURIComponent(options.list));

        let arr = data.amount.split("-");

        arr.forEach((item, index) => {
          let obj = {
            id: data.id,
            amount: data.amount.split("-")[index],
            gridLossRate: data.gridLossRate.split("-")[index],
            gridWinRate: data.gridWinRate.split("-")[index],
            interval: data.interval.split("-")[index],
            overLossRate: data.overLossRate.split("-")[index],
            overWinRate: data.overWinRate.split("-")[index],
            traceRate: data.traceRate.split("-")[index],
          };
          this.indexList.push(obj);
        });
        this.initParams = {
          id: data.id,
          amount: data.amount.split("-")[0],
          gridLossRate: data.gridLossRate.split("-")[0],
          gridWinRate: data.gridWinRate.split("-")[0],
          interval: data.interval.split("-")[0],
          overLossRate: data.overLossRate.split("-")[0],
          overWinRate: data.overWinRate.split("-")[0],
          traceRate: data.traceRate.split("-")[0],
          jc: 0,
        };
      }
    },
  };
</script>

<style lang="scss" scoped>
  .wrap {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 50rpx 37rpx;
    background-color: $uni-pages-bg-color;
    color: #fff;
  }

  .table-item {
    width: 100%;
    height: 50px;
    display: flex;

    uni-view {
      flex: 1;
    }
  }

  .btn-wrap {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 35px;

    .u-button {
      width: 120px;

      &:nth-child(1) {
        margin-right: 10px;
      }
    }
  }

  .slot-content {
    color: #000;

    .zy {
      color: #333;
    }

    .num-wrap {
      display: flex;

      .label {
        margin-right: 6px;
      }
    }
  }

  /deep/ .uni-input-input {
    color: #fff !important;
  }
</style>